<template>
	<view class="h100">
		<my-scroll class="h100 p-10" @scrolltolower="scrolltolower" backTop>
			<template v-for="(item, i) in list">
				<view class="item" @click="imgFn(item)">
					<template v-if="['办公室', '油脂库'].includes(options.type)">
						<view class="flex">
							<up-text :text="item.DepartmentName || item.AreaName" :lines="1" class="item-p" size="16" color="#333333" />
							<up-tag :text="item.PersonName" plain size="mini" v-if="item.PersonName != '-'" />
						</view>
						<template
							v-for="(item2, i) in [
								{ title: '门禁方向', key: 'StrInorout' },
								{ title: '验证方式', key: 'modeIndexName' },
								{ title: '发生时间', key: 'RecordDate' }
							]"
							:key="i"
						>
							<view class="flex m-y-4">
								<view class="flex s-center">
									<up-text :text="`${item2.title}：`" color="#525866" size="14" />
								</view>
								<up-text :text="item[item2.key]" :lines="1" color="#7F899F" size="14" />
							</view>
						</template>
					</template>

					<template v-else>
						<view class="flex">
							<up-text :text="item.EntranceName" :lines="1" class="item-p" size="16" color="#333333" />
							<up-tag :text="item.PlateNo" plain size="mini" />
						</view>
						<template
							v-for="(item2, i) in [
								{ title: '车牌颜色', key: 'PlateColor' },
								{ title: '入场/出场', key: 'CrossDirection' },
								{ title: '入场时间', key: 'EnterTime' },
								{ title: '离场时间', key: 'LeaveTime' }
							]"
							:key="i"
						>
							<view class="flex m-y-4">
								<view class="flex s-center">
									<!-- <image :src="getImgUrl(item2.img)" mode="widthFix" style="width: 30rpx;height: 32rpx;"
										class="m-r-5" /> -->
									<up-text :text="`${item2.title}：`" color="#525866" size="14" />
								</view>
								<up-text :text="item[item2.key]" :lines="1" color="#7F899F" size="14" />
							</view>
						</template>
					</template>
				</view>
			</template>
		</my-scroll>
		<up-modal :show="imgShow" @confirm="imgShow = false" @close="imgShow = false" :closeOnClickOverlay="true">
			<view class="w100 image">
				<image :src="imgSrc" mode="widthFix" style="width: 100%" />
			</view>
		</up-modal>
	</view>
</template>

<script setup>
/**************************************请求数据*************************************************/
import { callApiBySuffix } from '@/api/customApi';

const options = ref({}),
	suffix = ref('');

// 接收消息详情页数据：
onLoad((val) => {
	options.value = JSON.parse(val.data);
	uni.setNavigationBarTitle({
		title: options.value.type + options.value.title
	});
	switch (options.value.type) {
		case '办公室':
			suffix.value = 'getOfficeAreaPersonList';
			break;
		case '油脂库':
			suffix.value = 'getGreaseStorePersonList';
			break;
		case '主干道':
			suffix.value = 'getMainRoadCrossAccessList';
			break;
		case '西排土场观景台三岔路口':
			suffix.value = 'getWestDumpingGroundCarAccessList';
			break;
		case '一号车间二破':
			suffix.value = 'getYIHCJGCrecordList_N';
			break;
		default:
			break;
	}
	fn1();
});
let list = ref([]),
	tatalData = [];

function fn1() {
	callApiBySuffix({
		suffix: suffix.value,
		data: ['办公室'].includes(options.value.type)
			? {
					personType: options.value.title,
					deptName: '全部',
					total: true
			  }
			: {
					total: true
			  }
	}).then((res) => {
		if (['办公室', '油脂库'].includes(options.value.type)) {
			// 员工，陌生人，访客
			tatalData = res.data.filter((item) => {
				item.RecordDate = `${item.RecordDate} ${item.RecordTime}`;
				return item.StrPersonType == options.value.title;
			});
		} else {
			// 入场，离场
			let type;
			if (options.value.title == '离场车数') {
				type = '出场';
			} else {
				type = '入场';
			}
			tatalData = res.data.filter((item) => item.CrossDirection == type);
		}
		list.value = tatalData.slice(0, 20);
	});
}

// 滚动到底部加载数据
function scrolltolower() {
	if (list.value.length <= tatalData.length) {
		list.value.push(...tatalData.slice(list.value.length, list.value.length + 20));
	}
}

const imgShow = ref(false),
	imgSrc = ref('');

function imgFn(data) {
	if (data.picturePath) {
		imgSrc.value = data.picturePath.replace('http://127.0.0.1:83', 'https://117.191.103.69:39400');
		imgShow.value = true;
	}
}
</script>

<style lang="scss" scoped>
.item {
	padding: 10px;
	background: #fff;
	border-radius: 8px;
	background-image: url('@/static/img/header.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: bottom;

	+ .item {
		margin-top: 10px;
	}
}

:deep() {
	.u-modal__content {
		box-sizing: border-box;
	}

	.u-modal__content {
		font-size: 0;
		padding: 10px !important;
	}

	.image {
		border: 1px solid rgb(214, 215, 217);
		border-radius: 4px !important;
	}
}
</style>
